<nav class="toc py-3">
  <div class="toc-item" [class.active]="isActive(['/'], true)">
    <a class="toc-link" routerLink="/">Home</a>
  </div>
  <div class="toc-item" [class.active]="isActive(['/getting-started'])">
    <a class="toc-link" routerLink="/getting-started">Getting Started</a>
  </div>
  <div class="toc-item" [class.active]="isActive(['/components'], false)">
    <a class="toc-link" [routerLink]="['/components']">Components</a>
    <ul class="nav flex-column">
      <li
        *ngFor="let component of components"
        [class.active]="isActive(['/components', component.toLowerCase()], false)"
      >
        <a class="toc-link" [routerLink]="['/components', component.toLowerCase()]">{{ component }}</a>
      </li>
    </ul>
  </div>
</nav>
